<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0;
				display: flex;
				justify-content:center ;
				align-items: center;
				height: 100vh;
				background: #000;
			}
			a{
				text-decoration: none;
				font-size: 24px;
				color: #fff;
				background: linear-gradient(to right,#409eff,#2af788,#ffcc33,#409eff);
				width: 400px;
				height: 100px;
				display: flex;
				justify-content:center ;
				align-items: center;
				border-radius: 50px;
				background-size: 400%;
				position: absolute;
				text-transform: uppercase;
			}
			a::before{
				content: '';
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				background: linear-gradient(to right,#409eff,#2af788,#ffcc33,#409eff);
				border-radius: 50px;
				background-size: 400%;
				z-index: -1;
				filter: blur(30px);
			}
			a:hover{
				animation: test 3s linear infinite;
			}
			@keyframes test{
				0%{
					background-position: 0 0;
				}
				100%{
					background-position: 400% 0;
				}
			}
		</style>
	</head>
	<body>
		<a href="#">sunbutton</a>
	</body>
</html>
